<template>
  <div>
    <div ref="month" style="width: 100%;height: 400px; z-index: 9999" />
    <!--        <day v-if="monthVisible" :style="panelStyle"></day>-->
    <day v-if="monthVisible" />
  </div>
</template>

<script>
/**
     *
     select extract(month from to_timestamp(t)) smonth, count(t) as number from d where p = '360se' group by smonth order by smonth
     */
import echarts from 'echarts'
import day from './day'

export default {
  name: 'Month',
  components: {
    day
  },
  data() {
    return {
      offsetX: '',
      offsetY: '',
      monthTips: '',
      monthVisible: false,
      chart: null,
      monthData: [{ 'number': 382358, 'smonth': 5.0 }, { 'number': 352852, 'smonth': 6.0 }, {
        'number': 314386,
        'smonth': 7.0
      }, { 'number': 270745, 'smonth': 8.0 }]
    }
  },
  computed: {
    panelStyle() {
      return `position: fixed;left: 50%;top: ${this.offsetY}px; transform:translateX(-50%);border:2px solid yellow;`
    }

  },
  mounted() {
    this.chart = echarts.init(this.$refs.month)
    const option = {
      title: {
        text: '2012年',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function(params) {
          return `2012年${params.data.smonth}月访问${params.data.number}次`
        }
      },
      dataset: {
        dimensions: ['number', 'smonth'],
        source: this.monthData
      },
      xAxis: {
        type: 'category', name: '月份', nameTextStyle: {
          fontSize: 20
        }, axisLabel: {
          formatter: function(value, index) {
            return `2012年${value}月`
          }
        }
      },
      // 声明一个 Y 轴，数值轴。
      yAxis: {
        type: 'value', name: '访问次数', nameTextStyle: {
          fontSize: 20
        }, axisLabel: {
          formatter: function(value, index) {
            if (value == 0) {
              return 0
            }
            const time = value / 1000
            return `${time}千次`
          }
        }
      },
      series: [
        {
          type: 'line',
          encode: {
            x: 'smonth',
            y: 'number'
          },
          symbolSize: function(val) {
            return 15
          },
          lineStyle: {
            normal: {
              color: 'green',
              width: 4,
              type: 'dashed'
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 3,
              borderColor: 'red',
              color: 'black'
            }
          }
        }
      ]
    }
    this.chart.setOption(option)
    var _this = this
    this.chart.on('mouseover', function(params) {
      _this.monthVisible = true
      _this.offsetY = params.event.event.offsetY + 10
      _this.monthTips = `2012年${params.data.smonth}月访问${params.data.number}次`
    })
    this.chart.on('mouseout', function(params) {
      // _this.monthVisible = false;
    })
  }
}
</script>

<style scoped>
</style>
